<script setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue';
import { saveUser, queryDepts, queryJob, updateUser } from "@/utils/api";
import axios from 'axios';
import { Check, Close, Delete, Edit, Message, Search, Star, Plus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from "element-plus";

//声明事件 关闭事件
const emits = defineEmits(["close", "refreshData"]);

//定义属性
const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
        default: false
    }
})


//定义消息框是否显示
// const visible = ref(true)
const sourceList = ref([
    { id: 1, name: "电话营销" },
    { id: 2, name: "微信营销" },
    { id: 3, name: "SEM" },
    { id: 4, name: "信息流" },
    { id: 5, name: "客户介绍" },
    { id: 6, name: "独立开发" },
    { id: 7, name: "社群" },
    { id: 8, name: "其他" },
])
const levelList = ref([
    { id: 1, name: "A" },
    { id: 2, name: "B" },
    { id: 3, name: "C" },
    { id: 4, name: "D" },
])
const followStatusList = ref([
    { id: 1, name: "初次沟通" },
    { id: 2, name: "方案报价" },
    { id: 3, name: "邀约进行" },
    { id: 4, name: "商务谈判" },
    { id: 5, name: "拟定合同" },
    { id: 6, name: "签订合同" },
])
//定义用户对象
const customer = ref({
    name: "",
    gender: 1,
    contact: "",
    birthday: "",
    mobile: "",
    note: "",
    email: "",
    address: "",
    job: "",
    source: 1,
    followStatus: 1,
    level: 1,
    followDate: "",
    pid: "",
    user: ""

});

//声明初始方法
function init(data) {
    console.log(data);
    if (data) {
        //data存在，说明是修改
        customer.value = data;
    } else {
        //否则为新增，将user的值还原
        customer.value = {
            name: "",
            gender: 1,
            contact: "",
            birthday: "",
            mobile: "",
            note: "",
            email: "",
            address: "",
            job: "",
            source: 1,
            followStatus: 1,
            level: 1,
            followDate: "",
            pid: "",
            user: ""
        };
    }
}

function save() {
    let promise;
    // if (customer.value.id) {
    //     //修改用户
    //     console.log("修改信息：", customer.value);
    //     promise = updateUser(customer.value)
    // } else {
    //     //新增用户
    //     promise = saveUser(customer.value)
    // }
    promise.then((res) => {
        if (res.code == 1) {
            ElMessage({
                message: "保存成功",
                type: "success",
            });
            //关闭
            close();
            //通知父组件更新数据
            emits("refreshData")
        }
    })
}

//关闭弹窗时调用的方法
function close() {
    //抛出事件 父组件 同时传递值
    emits("close", false);
    customer.value = {
        name: "",
        gender: 1,
        contact: "",
        birthday: "",
        mobile: "",
        note: "",
        email: "",
        address: "",
        job: "",
        source: 1,
        followStatus: 1,
        level: 1,
        followDate: "",
        pid: "",
        user: ""
    };
}




/******************生命周期********** */
onMounted(() => {

});
//暴露方法
// defineExpose({ init });

</script>
<template>
    <el-dialog :model-value="visible" width="50%" :close-on-click-modal="false" @close="close" draggable>
        <!--基本信息-->
        <div class="basic">
            <div style="font-weight: bold">客户信息</div>
            <el-row>
                <el-col :span="3">客户名称:</el-col>
                <el-col :span="9">
                    <el-input placeholder="请输入客户名称" clearable /></el-col>
                <el-col :span="3">性别:</el-col>
                <el-col :span="9">
                    <el-radio-group>
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                        <el-radio :label="3">保密</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">客户联系人:</el-col>
                <el-col :span="9">
                    <el-input placeholder="请输入客户联系人" clearable /></el-col>
                <el-col :span="3">生日:</el-col>
                <el-col :span="9">
                    <el-date-picker v-model="value1" popper-class="m-d" type="date" style="width:180px"
                        placeholder="选择月份和日期" format="MM月dd日" value-format="MM-dd">
                    </el-date-picker>

                </el-col>
            </el-row>

            <el-row>
                <el-col :span="3">部门:</el-col>
                <el-col :span="9">
                    <el-select clearable @change="chg">
                        <el-option v-for="item in deptoptions" :key="item.id" :label="item.deptName"
                            :value="item.id + '!' + item.deptNo" />
                    </el-select>
                </el-col>
                <el-col :span="3">手机号码:</el-col>
                <el-col :span="9">
                    <el-input placeholder="请输入手机号码" clearable /></el-col>
            </el-row>
            <el-row>
                <el-col :span="3">职位:</el-col>
                <el-col :span="9">
                    <el-select clearable @change="chg1">
                        <el-option v-for="item in joboptions" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-col>
                <el-col :span="12">&nbsp;</el-col>
            </el-row>
        </div>

        <!--账号信息-->
        <div class="basic" style="margin-top: 20px">
            <el-row>
                <el-col :span="3">账号:</el-col>
                <el-col :span="9">
                    <el-input placeholder="请输入账号" clearable />
                </el-col>
                <el-col :span="3">状态:</el-col>
                <el-col :span="9">
                    <el-switch class="mt-2" inline-prompt :active-icon="Check" :inactive-icon="Close" :active-value="1"
                        :inactive-value="2" />

                </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">密码:</el-col>
                <el-col :span="9">
                    <el-input placeholder="请输入密码" type="password" clearable show-password />
                </el-col>
                <el-col :span="3">备注:</el-col>
                <el-col :span="9">
                    <el-input placeholder="请输入备注" clearable /></el-col>
            </el-row>
        </div>

        <!--按钮-->
        <div class="btn">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button style="margin-left: 60px" @click="close">取消</el-button>
        </div>
    </el-dialog>
</template>
<style  lang="scss">
.basic {
    width: 100%;
    border: #eee solid 1px;
    padding: 5px;
}


 /*选择日期，年份的隐藏 */
 .m-d {
     .el-date-picker__header {
      span:nth-child(2) { 
        display: none;
      }
      button:first-child {
        display: none;
      }
      button:last-child {
        display: none;  
      }
    }
  }



.el-row{
    display: flex;
    align-items: center;
    margin: 15px 0;
}

.el-col-3 {
    text-align: center;
}

.btn {
    text-align: center;
    margin-top: 20px;
}
</style>